<script setup lang="ts">
/** 上级引用此件
<template>
  <HelloWorld msg="Hello,Vite + Vue" />
</template>
*/

// import { ref } from 'vue' //自动导入不需要了
import { ArrowUpBold, ArrowDownBold, Loading } from "@element-plus/icons-vue";

// defineProps<{ msg: string }>();
defineProps({
  msg: {
    type: String,
    //required: true,                        // 必填项
    default: "Hello,Vite + Vue", // 默认值
  },
});

const count = ref(0);
const iconName = ref("fullscreen");
const isAnimate = ref(true);
</script>

<template>
  <div class="mainwrap">
    <div class="card">
      <a href="https://vite.dev" target="_blank">
        <img src="@/assets/icons/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="@/assets/icons/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>

    <h1 class="text-center">{{ msg }}</h1>

    <div class="card">
      <el-button type="primary" :icon="ArrowUpBold" @click="count++">count is {{ count }}</el-button>
      <el-button type="primary" :icon="ArrowDownBold" @click="count--">count is {{ count }}</el-button>
    </div>
    <p>
      <code>components/HelloWorld.vue</code>
      演示Element Plus图标和本地svg图标的使用
    </p>
    <div class="card">
      <el-icon :size="30" color="hotpink" class="is-loading">
        <Loading />
      </el-icon>
    </div>

    <div class="card">
      <span class="i-svg:vite text-3xl c-blue-500"></span>
    </div>

    <div class="card">
      <el-button type="success" @click="isAnimate = !isAnimate">
        <span class="i-svg:fullscreen text-2xl hover:i-svg:fullscreen-exit text-2xl"></span>
        <span class="ml-2">use svg icon : 常规使用</span>
      </el-button>
    </div>

    <div class="card">
      <el-button type="success" @mouseenter="iconName = 'fullscreen-exit'" @mouseleave="iconName = 'fullscreen'"
        @click="isAnimate = !isAnimate">
        <span :class="`i-svg:${iconName} text-2xl c-red-400`"></span>
        <span class="ml-2">use svg icon : 动态绑定</span>
      </el-button>
    </div>

    <div class="card" :class="isAnimate ? 'animate__animated animate__wobble animate__slower animate__infinite' : ''"
      @mouseenter="isAnimate = false">
      Animate.css Example
    </div>
  </div>
</template>

<style scoped>
.mainwrap {
  display: flex;
  /* 主轴方向 */
  flex-direction: column;
  /*主轴对齐方式，当前方向为column为垂直对齐方式 */
  align-items: center;
  /* 交叉轴对齐方式对齐方式：当前方向为column为水平对齐方式 */
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.card {
  display: flex;
  justify-content: space-around;
  padding: 2px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>